<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			padding: 0;
			margin: 0;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #222;
			color: #fff;
		}
		svg {
			transform: rotate(-0.05deg);
		}

		circle {
			transition: stroke-dasharray .2s;
		}

		.time-count-x {
			line-height: 1.5;
			position: relative;
			width: 440px;
			height: 440px;
		}

		.time-second {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			margin-top: -.75em;
			text-align: center;
			font-size: 100px;
		}
	</style>
	<body>
		<div id="timeCountX" class="time-count-x">
			<svg width="440" height="440" viewBox="0 0 440 440" class="center">
				<defs>
					<linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
						<stop offset="0%" stop-color="#e52c5c"></stop>
						<stop offset="100%" stop-color="#ab5aea"></stop>
					</linearGradient>
					<linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">
						<stop offset="0%" stop-color="#4352f3"></stop>
						<stop offset="100%" stop-color="#ab5aea"></stop>
					</linearGradient>
				</defs>
				<g transform="matrix(0,-1,1,0,0,440)">
					<circle cx="220" cy="220" r="170" stroke-width="50" stroke="#f0f1f5" fill="none"
						stroke-dasharray="1069 1069"></circle>
					<circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none"
						stroke-dasharray="1069 1069"></circle>
					<circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient2')" fill="none"
						stroke-dasharray="534.5 1069"></circle>
				</g>
			</svg>
			<span id="timeSecond" class="time-second"></span>
		</div>
	</body>
	<script>
		var eleCircles = document.querySelectorAll("#timeCountX circle");
		var eleTimeSec = document.getElementById("timeSecond");
		var perimeter = Math.PI * 2 * 170;
		var circleInit = function() {
			if (eleCircles[1]) {
				eleCircles[1].setAttribute("stroke-dasharray", "1069 1069")
			}
			if (eleCircles[2]) {
				eleCircles[2].setAttribute("stroke-dasharray", perimeter / 2 + " 1069")
			}
			eleTimeSec.innerHTML = ""
		};
		var timerTimeCount = null;
		var fnTimeCount = function(b) {
			if (timerTimeCount) {
				return
			}
			var b = b || 100;
			var a = function() {
				var c = b / 100;
				if (eleCircles[1]) {
					eleCircles[1].setAttribute("stroke-dasharray", perimeter * c + " 1069")
				}
				if (eleCircles[2] && b <= 5) {
					eleCircles[2].setAttribute("stroke-dasharray", perimeter * c + " 1069")
				}
				if (eleTimeSec) {
					eleTimeSec.innerHTML = b
				}
				b--;
				if (b < 0) {
					clearInterval(timerTimeCount);
					timerTimeCount = null;
					circleInit()
				}
			};
			a();
			timerTimeCount = setInterval(a, 1000)
		};
		fnTimeCount();
	</script>
</html>
</script>
</html>
